<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<c:set var="path" value="${pageContext.request.scheme}s://${pageContext.request.serverName}${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>项目详情</title>
    <link rel="stylesheet" href="${path}/static/h5/file/style/style.css">
    <style>
        .all_txt{
            word-wrap: break-word;
        }
        .is_load{
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            font-size: 5vw;
            color: #33c491;
            text-align: center;
            padding-top: 30vw;
            background: #fff;
        }
    </style>
</head>
<body>
<div class="sample_wrap">
    <div v-if="!isLoad" class="is_load">
        正在加载中....
    </div>
    <div class="sample_box" v-if="!error">
        <div class="model_box">
            <h2 class="model_head">{{infoData.name}}</h2>
            <div class="model_item" v-if="infoData.info">
                <h3 class="item_title">释义</h3>
                <div class="item_content">
                    <div class="item_desc">
                        <p class="all_txt" v-html='infoData.info'></p>
                    </div>
                </div>
            </div>
            <div class="model_item" v-if="infoData.infoBegin">
                <h3 class="item_title">简介</h3>
                <div class="item_content">
                    <div class="item_desc">
                        <p class="all_txt" v-html='infoData.infoBegin'></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="model_box">
            <div class="model_item">
                <h3 class="item_title">参考范围</h3>
                <div class="item_content">
                    <div class="item_desc">
                        <p class="text_center" v-if="infoData.type==2">{{infoData.rangeMin}}-{{infoData.rangeMax}} {{infoData.rangeInfo}}</p>
                        <p class="text_center" v-else>{{infoData.range}}</p>
                    </div>
                </div>
            </div>
            <div class="model_item" v-if="myVal">
                <h3 class="item_title">您的结果</h3>
                <div class="item_content">
                    <div class="item_desc">
                        <p class="mine_result" v-if="infoData.type==2">
                            <span>{{myVal}} {{infoData.rangeInfo}}</span>
                            <span v-if="myVal>parseInt(infoData.rangeMax)">较高</span>
                            <span v-else-if="myVal<parseInt(infoData.rangeMin)">较低</span>
                            <span v-else>正常</span>
                        </p>
                        <p class="mine_result" v-else>
                            <span>{{myVal}}</span>
                            <span v-if="myVal==infoData.range">正常</span>
                            <span v-else>不正常</span>
                        </p>
                        <div id="my_result"></div>
                    </div>
                </div>
            </div>
            <div class="model_item">
                <h3 class="item_title">大众实测值</h3>
                <div class="item_content">
                    <div class="item_desc">
                        <div id="common_result"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="model_box">
            <div class="model_item">
                <h3 class="item_title">结果分析</h3>
                <div class="item_content">
                    <div class="flex_box" v-for="item in result">
                        <span class="flex_name" v-html="item.title"></span>：
                        <p class="flex_item" v-html="item.content"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <div class="no_data">
            <img src="${path}/static/h5/file/images/no_data.png">
        </div>
        <p class=" error">参数错误，请返回查看</p>
    </div>
</div>



<script src="${path}/static/h5/file/js/jquery.js"></script>
<script src="${path}/static/h5/file/js/vue.min.js"></script>
<script src="${path}/static/h5/file/js/echarts.min.js"></script>

<script>

    new Vue({
        el:'.sample_wrap',
        data:{
            isLoad:false,
            infoData:'',
            sampleInfo:'',
            subInfo:'',
            myVal:'',
            myAge:0,
            showInfo:false,
            result:[],
            error:false
        },
        created:function(){
            var id=this.getQueryString('id');
            if(!id){
                this.error=true
            }else{
                this.myVal=this.getQueryString('val');
                this.myAge=this.getQueryString('age')
                this.getInfo(id);
            }
        },
        methods:{
            getInfo:function(id){
                var that=this;
                $.ajax({
                    url:'https://www.ok-report.com/api/chemical/getInfo',
                    type:"post",
                    data:{
                        id:id,
                    },
                    success:function(res){
                        console.log(res)
                        if(res.errorCode==200){
                            that.isLoad=true;
                            that.error=false;
                            that.infoData=res.data;
                            that.subInfo=res.data.infoBegin+'...<a href="javascript:void(0);" class="scan_more">查看更多</a>';
                            that.result=JSON.parse(res.data.result);
                            var paramJson=JSON.parse(res.data.paramJson);
                            var common_color=["#FF7070","#60B6E3","#56d565","#fbbd16"];
                            if(res.data.type==2){
                                var legendData,seriesData;
                                //大众实测
                                var manData=[],
                                    womanData=[];
                                paramJson.forEach(function(item){
                                    if(item.sex==1){//男
                                        manData.push([parseFloat(item.age),parseFloat(item.param)])
                                    }else{
                                        womanData.push([parseFloat(item.age),parseFloat(item.param)])
                                    }
                                });

                                //我的显示
                                if(that.myVal){
                                    var project_name=res.data.name;
                                    var project_max=res.data.rangeMax;
                                    var project_min=res.data.rangeMin;
                                    var yValue=res.data.rangeInfo;
                                    var labelOption = {
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            distance:'10',
                                            align: 'middle',
                                            formatter: '{a}：{c}',
                                            fontSize: 10,
                                            rich: {
                                                name: {
                                                    textBorderColor: '#fff'
                                                }
                                            }
                                        }
                                    };
                                    var myOption = {
                                        color: ['#66CC99', '#e5323e', '#66CC99'],
                                        grid: {
                                            left:10,
                                            top:30,
                                            right:0,
                                            bottom:0,
                                            containLabel: true
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                axisTick: {show: false},
                                                data: [project_name],
                                                axisLine:{
                                                    lineStyle:{
                                                        color:'#999',
                                                    }
                                                }
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                name:yValue,
                                                type: 'value',
                                                axisLine:{
                                                    lineStyle:{
                                                        color:'#999',
                                                    }
                                                },
                                            }
                                        ],
                                        series: [
                                            {
                                                name: '最低',
                                                type: 'bar',
                                                barGap: .5,
                                                barWidth: '10%',
                                                label: labelOption,
                                                data: [project_min]
                                            },
                                            {
                                                name: '我的',
                                                type: 'bar',
                                                barWidth: '10%',
                                                label: labelOption,
                                                data: [that.myVal]
                                            },
                                            {
                                                name: '最高',
                                                type: 'bar',
                                                barWidth: '10%',
                                                label: labelOption,
                                                data: [project_max]
                                            }
                                        ]
                                    };
                                    var myResult = echarts.init(document.getElementById('my_result'));
                                    myResult.setOption(myOption);
                                }

                                if(that.myAge && that.myVal){
                                    legendData=['我的','女性','男性'];
                                    seriesData=[
                                        {
                                            name:'我的',
                                            type: 'effectScatter',
                                            symbolSize: 20,
                                            data:[[that.myAge, that.myVal]],
                                            markPoint : {
                                                data : [
                                                    {type : 'max', name: '最大值'},
                                                ]
                                            }
                                        },
                                        {
                                            name:'女性',
                                            type:'scatter',
                                            data: womanData
                                        },
                                        {
                                            name:'男性',
                                            type:'scatter',
                                            data: manData
                                        }
                                    ]
                                }else{
                                    legendData=['女性','男性'];
                                    seriesData=[
                                        {
                                            name:'女性',
                                            type:'scatter',
                                            data: womanData
                                        },
                                        {
                                            name:'男性',
                                            type:'scatter',
                                            data: manData
                                        }
                                    ]
                                }

                                var commonOption = {
                                    color:common_color,
                                    grid: {
                                        left:10,
                                        top:50,
                                        right:10,
                                        bottom:10,
                                        containLabel: true
                                    },
                                    legend: {
                                        data:legendData
                                    },
                                    xAxis : [
                                        {
                                            type : 'value',
                                            scale:true,
                                            axisLine:{
                                                lineStyle:{
                                                    color:'#999',
                                                }
                                            },
                                            axisLabel : {
                                                formatter: '{value}岁'
                                            }
                                        }
                                    ],
                                    yAxis : [
                                        {

                                            name:yValue,
                                            type : 'value',
                                            scale:true,
                                            axisLabel : {
                                                formatter: '{value} '
                                            },
                                            axisLine:{
                                                lineStyle:{
                                                    color:'#999',
                                                }
                                            }
                                        }
                                    ],
                                    series : seriesData
                                };
                                var commonResult = echarts.init(document.getElementById('common_result'));
                                commonResult.setOption(commonOption);

                            }else{
                                if(that.myVal){
                                    var typeVal=that.myVal=='阳性'?'1':'-1'
                                    var ItemStyle = {
                                        normal: {
                                            color: function(params) {
                                                var colorList;
                                                if (params.data >= 0) {
                                                    colorList = '#e5323e';
                                                } else {
                                                    colorList = '#66CC99';
                                                }
                                                return colorList;
                                            },
                                        }
                                    };
                                    var labelOption={
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            distance:'10',
                                            align: 'middle',
                                            formatter: '{a}',
                                            fontSize: 10,
                                            rich: {
                                                name: {
                                                    textBorderColor: '#fff'
                                                }
                                            }
                                        }
                                    }
                                    var myOption = {
                                        grid: {
                                            left:10,
                                            top:30,
                                            right:0,
                                            bottom:20,
                                            containLabel: true
                                        },
                                        xAxis: [{
                                            type: 'category',
                                            axisLine:{
                                                lineStyle:{
                                                    color:'#999',
                                                }
                                            },
                                        }],
                                        yAxis: [{
                                            min:-1,
                                            max:1,
                                            type: 'value',
                                            name:"阳性/阴性",
                                            axisLine:{
                                                lineStyle:{
                                                    color:'#999',
                                                }
                                            },
                                        }],
                                        series: [
                                            {
                                                name:"阳性",
                                                type: 'bar',
                                                itemStyle: ItemStyle,
                                                label:labelOption,
                                                data: [1],
                                                barWidth: '10%'
                                            },
                                            {
                                                name:"阴性",
                                                type: 'bar',
                                                itemStyle: ItemStyle,
                                                label:labelOption,
                                                data: [-1],
                                                barWidth: '10%'
                                            },
                                            {
                                                name:"我的",
                                                type: 'bar',
                                                itemStyle: ItemStyle,
                                                label:labelOption,
                                                data: [typeVal],
                                                barWidth: '10%'
                                            },
                                        ]
                                    };
                                    var myResult = echarts.init(document.getElementById('my_result'));
                                    myResult.setOption(myOption);
                                }
                                //大众数据
                                var startAge=15,
                                    manYang=[],
                                    manYing=[],
                                    womanYang=[],
                                    womanYing=[],
                                    ageXParams=[];
                                for(var i=startAge;i<=60;i++){
                                    ageXParams.push(i+'岁');
                                }
                                paramJson.forEach(function(item){
                                    if(item.sex==1){//男
                                        if(item.param=='阳性'){
                                            manYang[item.age-startAge]=item.num;
                                        }else{
                                            manYing[item.age-startAge]=item.num;
                                        }
                                    }else{//女
                                        if(item.param=='阳性'){
                                            womanYang[item.age-startAge]=item.num;
                                        }else{
                                            womanYing[item.age-startAge]=item.num;
                                        }
                                    }
                                });
                                var commonOption = {
                                    color:common_color,
                                    grid: {
                                        left:10,
                                        top:50,
                                        right:10,
                                        bottom:5,
                                        containLabel: true
                                    },
                                    toolbox: {
                                        show: true
                                    },
                                    // tooltip: {
                                    //     trigger: 'axis'
                                    // },
                                    legend: {
                                        data:['男-阳性','女-阳性','男-阴性','女-阴性']
                                    },
                                    xAxis:  {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: ageXParams,
                                        // min:5,
                                        axisLabel: {
                                            formatter: '{value}'
                                        },
                                        axisLine:{
                                            lineStyle:{
                                                color:'#999',
                                            }
                                        },
                                    },
                                    yAxis: {
                                        name:'人数',
                                        type: 'value',
                                        axisLabel: {
                                            formatter: '{value}'
                                        },
                                        axisLine:{
                                            lineStyle:{
                                                color:'#999',
                                            }
                                        },
                                    },
                                    series: [
                                        {
                                            name:'男-阳性',
                                            type: "line",
                                            symbol: "circle",
                                            data:manYang
                                        },
                                        {
                                            name:'女-阳性',
                                            type:'line',
                                            symbol: "circle",
                                            data:womanYang
                                        },
                                        {
                                            name:'男-阴性',
                                            type:'line',
                                            symbol: "circle",
                                            data:manYing
                                        },
                                        {
                                            name:'女-阴性',
                                            type:'line',
                                            symbol: "circle",
                                            data:womanYing
                                        }
                                    ]
                                };
                                var commonChart = echarts.init(document.getElementById('common_result'));
                                commonChart.setOption(commonOption);
                            }
                        }else{
                            that.error=true;
                            that.isLoad=true;
                        }
                    }
                })
            },
            subShow:function(){
                this.showInfo=true;
            },
            getQueryString:function(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return decodeURI(r[2]);
                }
                return null;
            }
        }
    });

</script>
</body>
</html>